<template>
	<view>

		<view class="flex-col feiyongxiangqing">


			<view class="flex-col wrapper">
				<view class="flex-row wraper-row">
					<view class="u-line-1 text">姓名：</view>
					<view class="u-line-1 text">{{recordjl.name}}</view>
					<view class="u-line-1 text">状态：</view>
					<view class="flex-row box">
						<view class="u-line-1 text-two">{{recordjl.status}}</view>
						<!-- <view class="u-line-1 text">：</view> -->
					</view>
					<!-- <view class="u-line-1 text">24岁</view> -->
				</view>
				<view class="flex-row wraper-row-two">
					<view class="u-line-1 text-two">入院日期：</view>
					<view class="u-line-1 text-five" style="float: left;margin: 0px 16px 0px 0px;">
						{{recordjl.hospitalizedTime}}</view>
				</view>
				<view class="flex-row wraper-row-three">
					<view class="u-line-1 text-four">入院日期：</view>
					<view class="u-line-1 text-five" style="width: 140px;margin-left: -29px;">{{recordjl.leavehospitalTime}}</view>
				</view>
				<u-line class="line" margin="0rpx 0rpx 25.362rpx 0rpx" border-style="dotted"></u-line>
				<view class="flex-row wraper-row-four">
					<view class="u-line-1 text">合计：</view>
					<view class="u-line-1 text-two" >￥{{recordjl.money}}</view>
				</view>
			</view>
			<view class="flex-col wrapper-two">
				<view class="u-line-1 text-three" style="width: 200px;">具体药品记录</view>
				<u-line class="line-two" margin="0rpx 0rpx 0rpx 5.435rpx"></u-line>

				<view class="flex-col wraper-row-yp" v-for="(r, index) in record.d" :ref="'r'+index">
					<view class="flex-row box-two">
						<view class="flex-col flex-row box-col">
							<view class="u-line-1 text-six">{{r.drugsName}}</view>
							<view class="flex-col flex-row container">
								<view class="u-line-1 text-seven">单价：</view>
								<view class="u-line-1 text-eight">￥{{r.drugsPrice}}</view>
							</view>
						</view>
						<view class="u-line-1 text-nine">数量：</view>
						<view class="u-line-1 text-ten">{{r.useNumber}}</view>
						<view class="u-line-1 text-eleven">￥{{r.price}}</view>
					</view>
					<u-line class="line-two" margin="0rpx 0rpx 0rpx 0rpx" ></u-line>
				</view>

			</view>
		</view>
	</view>

</template>

<script>
	export default {
		data() {
			return {
				drugRecordSerialNumber: 0,
				//住院人信息
				recordjl: {},
				//药品
				record: null,
			}
		},
		onLoad(res) {
			console.log(res)
			this.drugRecordSerialNumber = res.drugRecordSerialNumber;
			console.log("drugRecordSerialNumber:::" + this.drugRecordSerialNumber)
			this.findxq();
		},
		methods: {
			findxq() {
				uni.request({
					url: "http://localhost:9000/record/record/record/selectjlByInpatientdrugRecordSerialNumber/" +
						this.drugRecordSerialNumber,
					method: 'get',
					success: (res) => {
						console.log(res)
						this.recordjl = res.data.data.recordjlVo
						console.log(this.recordjl)
						this.findAllyp()
					}
				})
			},
			findAllyp() {
				uni.request({
					url: "http://localhost:9000/record/record/record/selectByInpatientrlsh/" + this.drugRecordSerialNumber,
					method: "GET",
					success: (res) => {
						// console.log(res)
						if (res.data.code == 20000) {
							this.record = res.data.data.record
							if (res.data.data.record == null) {
								console.log("zoukong!!!!!")
								this.record = {
									money: 0,
									d: {}
								}
							}
							console.log(this.record)
						}
					}

				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: #fff;
	}
	
	
	
	.wraper-row-yp {
		width: 373px;
		margin-bottom: 10px;
		padding: 12px 0px 8px 3.5px;

		.box-two {
			width: 369px;
			margin-left: 11px;

			.box-col {
				width: 121.5px;
				margin-right: 13px;

				.text-six {
					width: 119px;
					margin-bottom: 4px;
					font-size: 14px;
					color: rgba(0, 0, 0, 1);
				}

				.container {
					width: 121.5px;

					.text-seven {
						width: 78px;
						margin-bottom: -20px;
						font-size: 12px;
						color: #aaaaaa;
					}

					.text-eight {
						width: 72px;
						margin-left: 49px;
						font-size: 14px;
						color: #aaaaaa;
					}
				}
			}

			.text-nine {
				width: 40px;
				margin: 24px 1px 0px 0px;
				font-size: 12px;
				color: #aaaaaa;
			}

			.text-ten {
				width: 27px;
				margin: 24px 54px 0px 0px;
				font-size: 14px;
				color: #aaaaaa;
			}

			.text-eleven {
				width: 112px;
				margin-top: 10px;
				font-size: 16px;
				color: rgba(244, 99, 99, 1);
			}
		}

		.line-two {
			width: 383px;
			border-width: 2px;
			border-style: solid;
			border-color: #f2f2f2;
		}
	}


	/** 全局样式-开始,建议放在公共css样式文件中,比如common.css 或app.vue文件 */

	html,
	body {
		margin: 0;
		width: 100%;
		height: 100%;
		font-size: 16px
	}

	view,
	text,
	image {
		position: relative;
		box-sizing: border-box;
		flex-shrink: 0;
	}

	.flex-col {
		display: flex;
		align-items: flex-start;
		flex-direction: column;
	}

	.flex-row {
		display: flex;
		align-items: flex-start;
	}

	.flex-col .flex-row {
		width: 100%
	}

	/** 全局样式-结束*/

	.feiyongxiangqing {
		height: 896px;
		padding: 32px 0px 0px 11px;
		border-width: 2px;
		border-top-color: #f5f5f6;

		.wrapper {
			width: 388px;
			height: 169px;
			margin-bottom: 33px;
			padding: 15px 0px 18px 7px;
			border-top-width: 2px;
			border-top-style: solid;
			border-top-color: #f2f6fc;
			border-right-width: 2px;
			border-right-style: solid;
			border-right-color: #f2f6fc;
			border-bottom-width: 2px;
			border-bottom-style: solid;
			border-bottom-color: #f2f6fc;
			border-left-width: 2px;
			border-left-style: solid;
			border-left-color: #f2f6fc;
			background: rgba(245, 249, 255, 1);
			box-shadow: 2px 2px 2px #b9dcff;

			.wraper-row {
				width: 353px;
				justify-content: space-between;
				margin: 0px 0px 13px 6px;

				.text {
					width: 53px;
					font-size: 16px;
				}

				.box {
					width: 101px;

					.text-two {
						width: 83px;
						font-size: 16px;
						color: rgba(255, 0, 0, 1);
					}

					.text {
						width: 53px;
						font-size: 16px;
					}
				}
			}

			.wraper-row-two {
				width: 208px;
				justify-content: space-between;
				margin: 0px 0px 12px 6px;

				.text-two {
					width: 83px;
					font-size: 16px;
					color: rgba(255, 0, 0, 1);
				}

				.text-three {
					width: 53px;
					margin-bottom: 16px;
					font-size: 16px;
				}
			}

			.wraper-row-three {
				width: 208px;
				justify-content: space-between;
				margin: 0px 0px 12px 6px;

				.text-four {
					width: 112px;
					margin-top: 5px;
					font-size: 14px;
				}

				.text-five {
					width: 112px;
					font-size: 14px;
				}
			}

			.line {
				width: 366px;
				border-width: 2px;
				border-style: dashed;
			}

			.wraper-row-four {
				width: 136px;
				justify-content: space-between;
				margin-left: 230px;

				.text {
					width: 53px;
					font-size: 16px;
				}

				.text-two {
					width: 83px;
					font-size: 16px;
					color: rgba(255, 0, 0, 1);
				}
			}
		}

		.wrapper-two {
			width: 387px;
			height: 299px;
			padding: 12px 0px 0px 11px;
			border-top-width: 2px;
			border-top-style: solid;
			border-top-color: #f2f6fc;
			border-right-width: 2px;
			border-right-style: solid;
			border-right-color: #f2f6fc;
			border-bottom-width: 2px;
			border-bottom-style: solid;
			border-bottom-color: #f2f6fc;
			border-left-width: 2px;
			border-left-style: solid;
			border-left-color: #f2f6fc;
			background: rgba(255, 255, 255, 1);
			box-shadow: 2px 2px 2px #b9dcff;

			.text-three {
				width: 53px;
				margin-bottom: 16px;
				font-size: 16px;
			}

			.line-two {
				width: 336px;
				padding: 1px;
				border-width: 1px;
				border-style: solid;
				border-color: rgba(242, 242, 242, 1);
			}

			.wraper-row-five {
				width: 309.5px;
				justify-content: space-between;
				margin-bottom: 4px;
				padding-right: 0.5px;

				.text-four {
					width: 112px;
					margin-top: 5px;
					font-size: 14px;
				}

				.text-five {
					width: 112px;
					font-size: 14px;
				}
			}

			.line-three {
				width: 336px;
				padding: 1px;
				border-width: 1px;
				border-style: solid;
				border-color: rgba(242, 242, 242, 1);
			}

			.wraper-row-six {
				width: 309.5px;
				justify-content: space-between;
				padding-right: 0.5px;

				.text-six {
					width: 112px;
					font-size: 14px;
				}

				.text-seven {
					width: 112px;
					margin-top: 3px;
					font-size: 14px;
				}
			}

			.line-four {
				width: 336px;
				padding: 1px;
				border-width: 1px;
				border-style: solid;
				border-color: rgba(242, 242, 242, 1);
			}

			.wraper-row-seven {
				width: 309px;
				justify-content: space-between;
				margin-bottom: 4px;
				padding-right: 0.5px;

				.text-eight {
					width: 112px;
					font-size: 14px;
				}

				.text-nine {
					width: 112px;
					font-size: 14px;
				}
			}

			.line-five {
				width: 336px;
				padding: 1px;
				border-width: 1px;
				border-style: solid;
				border-color: rgba(242, 242, 242, 1);
			}

			.wraper-row-eight {
				width: 309px;
				justify-content: space-between;
				margin-bottom: 5px;
				padding-right: 0.5px;

				.text-ten {
					width: 112px;
					font-size: 14px;
				}

				.text-eleven {
					width: 112px;
					font-size: 14px;
				}
			}

			.line-six {
				width: 336px;
				padding: 1px;
				border-width: 1px;
				border-style: solid;
				border-color: rgba(242, 242, 242, 1);
			}
		}
	}
</style>
